<template>
    <div class="allRatings">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        影片评论
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <loading v-show="isLoading"></loading>
      <div class="content" ref="content">
        <div class="container">
          <div class="row border-1px" v-for="item in commentList">
            <div class="user">
              <div class="left">
                <img :src="item.headPicUrl" alt="" class="avatar" style="width: 100%;height: 100%">
              </div>
              <div class="right">
                <p class="user-name">{{item.userName?item.userName:item.phone}}</p>
                <div class="user-score">
                  <div class="star-wrapper">
                    <star :score="item.starNumScore"></star>
                  </div>
                </div>
              </div>
            </div>
            <div class="ratings">{{item.content}}</div>
            <p class="time">{{item.commentTimeDesc}}</p>
          </div>
          <endLine class="end-line" v-show="endFlag" :text="'我是有底线的'"></endLine>
        </div>
      </div>
    </div>
</template>

<script>
  import refresh from '../../../components/refresh/refresh'
  import star from '../../../components/star/star'
  import back from '../../../components/back/back'
  import endLine from '../../../components/endLine/endLine'
  import {getStorage} from "../../../common/js/localStorage";
  import BScroll from 'better-scroll'
  import {Toast} from 'mint-ui'
  import loading from '../../../components/loading/loading'
  import global from '../../../common/js/global'
    export default {
        name: "allRatings",
        components:{
          'back':back,
          'star':star,
          'endLine':endLine,
          'refresh':refresh,
          'loading':loading
        },
        data(){
          return {
            commentList:[],
            endFlag:false,
            rows:10,
            isRefresh:false,
            isLoading:false
          }
        },
        mounted() {
          this._getRatingsInfo()
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{
                click:true,
                pullUpLoad:{
                  threshold:-50
                },
                pullDownRefresh: {
                  threshold: 40,
                  stop: 30
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });
              let _this = this
              scroll.on('pullingUp',()=>{
                // alert()
                if(!_this.endFlag){
                  _this.rows+=10;
                  _this._getRatingsInfo()
                }
                scroll.refresh()
                scroll.finishPullUp()

              })

            }else {
              this.scroll.refresh();
            }
          })
        },
        methods:{
          _getRatingsInfo(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/filmCommentList',
                data:{
                  filmId:this.$route.query.id,
                  offset:0,
                  rows:this.rows
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.commentList = data.commentList
                  this.endFlag = data.endFlag
                }else{
                  Toast(res.data.errorMsg)
                }
              }else{
                Toast('服务器错误,错误代码:'+res.status)
              }
            })
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .allRatings
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .refresh-wrapper
      position absolute
      width calc(100% - 20px)
      top 50px
      z-index 10000
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      padding 0 15px
      overflow hidden
      .row
        text-align left
        border-1px(#343434)
        .user
          display flex
          margin-top 16px
          height 36px
          .left
            flex 0 0 36px
            background #00a0dc
            border-radius 18px
          .right
            flex 1
            margin-left 10px
            .user-name
              height 20px
              line-height 20px
              color #ffffff
              font-size 14px
            .user-score
              height 12px
              margin-top 2px
        .ratings
          padding 0 3px
          color #E8E8E8
          margin-top 8px
          font-size 13px
          line-height 20px
        .time
          height 14px
          font-size 10px
          line-height 14px
          padding 5px 0 6px 0
          color #8B929E
</style>
